<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js canvas - interactive - voxel painter</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="js/three.min.js"></script>

		<script src="../Prueba_Conjunta_Box2D_Three/js/Stats.js"></script>

		<script>

			//Variables globales
			var container, stats;
			var camera, scene, renderer;
			var projector, plane;
			var	theta = 45;
			var target = new THREE.Vector3( 0, 200, 0 )
			var geometry, material, mesh;

			init();
			animate();


			// Funciones 
			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.y = 800;
				scene = new THREE.Scene();

				grid();
				projector = new THREE.Projector(); //no se si es relevante
				plano(); // no se si es relevante
				lights();
				renderer_init();
				
				
				
			
				//creamos el cubo
				geometry = new THREE.CubeGeometry( 200, 200, 200 );
		        material = new THREE.MeshLambertMaterial( { color: 0xffffff, 
		        											shading: THREE.FlatShading, 
		        											overdraw: true } );
				
		        mesh = new THREE.Mesh( geometry, material );
				mesh.position.x = 0;
				mesh.position.y = 0;
				mesh.position.z = 0;
				scene.add( mesh );
				//

				
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				
	

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}
			
			// Funciones
			//onWindowsResize
			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
			//Plano
			function plano(){
				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() );
				plane.rotation.x = - Math.PI / 2;
				plane.visible = false;
				scene.add( plane );
				
			}
			//Lights
				function lights(){
				var ambientLight = new THREE.AmbientLight( 0x606060 );
				scene.add( ambientLight );

				var directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.x =  - 0.5;
				directionalLight.position.y = 0.2 ;
				directionalLight.position.z =  -0.3;
				directionalLight.position.normalize();
				scene.add( directionalLight );

				var directionalLight = new THREE.DirectionalLight( 0x808080 );
				directionalLight.position.x =   0.5;
				directionalLight.position.y =  - 0.5;
				directionalLight.position.z =   0.5;
				directionalLight.position.normalize();
				scene.add( directionalLight );
			}
			// Grid
			function grid(){
			// Grid

				var size = 500, step = 50;
				var geometry = new THREE.Geometry();
				for ( var i = - size; i <= size; i += step ) {
					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
				}

				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
				var line = new THREE.Line( geometry, material );
				line.type = THREE.LinePieces;
				scene.add( line );	
				
			}
			// Renderer_init
			function renderer_init(){
				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild(renderer.domElement);	
			}
			
			
			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}
			
			function render() {
				camera.position.x = 1400 ;
				camera.position.z = 1400;
				camera.lookAt( target );

				mesh.rotation.y -= 0.01;
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
